<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>
        动态表格
    </title>
    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }
        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin: 50px;
        }



    </style>
</head>
<body>
<div>
    <input type="text" id="name" placeholder="请输入姓名" autocomplete="off">
    <input type="text" id="age" placeholder="请输入年龄" autocomplete="off">
    <input type="text" id="gender" placeholder="请输入性别" autocomplete="off">
    <input type="button" value="添加" id="add">

</div>

<table id="tb">
    <caption>学生信息表</caption>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>操作</th>
    </tr>

    <tr>
        <td>李四</td>
        <td>24</td>
        <td>男</td>
        <td><a href="JavaScript:void(0);" onclick="drop(this)">删除</a></td>
    </tr>
    <tr>
        <td>张三</td>
        <td>23</td>
        <td>男</td>
        <td><a href="JavaScript:void(0);" onclick="drop(this)">删除</a></td>
    </tr>
</table>


</body>

<script>
    document.getElementById("add").onclick=function(){
        let tr = document.createElement("tr");

        let nameTd = document.createElement("td");

        let ageTd = document.createElement("td");

        let genderTd = document.createElement("td");

        let daleteTd = document.createElement("td");

        tr.appendChild(nameTd);

        tr.appendChild(ageTd);

        tr.appendChild(genderTd);

        tr.appendChild(daleteTd);

        let name = document.getElementById("name").value;

        let age = document.getElementById("age").value;

        let gender = document.getElementById("gender").value;

        let nameText = document.createTextNode(name);

        let ageText = document.createTextNode(age);

        let genderText = document.createTextNode(gender);

        nameTd.appendChild(nameText);

        ageTd.appendChild(ageText);

        genderTd.appendChild(genderText);

        let a = document.createElement("a");

        let aText = document.createTextNode("删除");

        a.setAttribute("href","JavaScript:void(0);");

        a.setAttribute("onclick","drop(this)")

        a.appendChild(aText);

        daleteTd.appendChild(a);

        let table = document.getElementById("tb");

        table.appendChild(tr);
    }
    function drop(obj){
        let table = obj.parentElement.parentElement.parentElement;

        let tr = obj.parentElement.parentElement;

        table.removeChild(tr);
    }
</script>
</html>